<template>
	<view class="uni_box home">
		<navbar title='有偿收录'>
		</navbar>
		<view class="content">
			<view class="kone">
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>考研年份：</text>
					<view class="shuru" @click="nianshow=true">
						<text class="xuanze " :class="nianinfo.id?'xactive':''">{{ nianinfo.name?nianinfo.name:'请选择考研年份' }}</text>
						<u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>考点所在城市：</text>
					<view class="shuru" @click="cityshow=true">
						<text class="xuanze " :class="cityinfo.id?'xactive':''">{{ cityinfo.name?cityinfo.name:'请选择' }}</text>
						<u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>报考点：</text>
					<view class="shuru" @click="getbaoselect">
						<text class="xuanze" :class="baoinfo.id?'xactive':''">{{ baoinfo.name?baoinfo.name:'请选择报考点' }}</text>
						<u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>报考院校：</text>
					<view class="shuru" @click="cityshow=true">
						<!-- <text class="xuanze">请选择你要报考的院校名称</text> -->
						<u-input  v-model="to_school" :value="to_school" type="text" :border="false" placeholder='请输入报考院校' @input="input" @blur="blur" />
						<!-- <u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon> -->
					</view>
					<view class="xuexia" v-if="isxuans">
						<scroll-view class="xiaview" scroll-y>
							<view class="beiview" v-for="(item,index) in bklist" :key="index" @click="xuanClick(item)">
								<text class="beiietm">{{item.name}}</text>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>类别：</text>
					<view class="shuru" @click="leishow=true">
						<text class="xuanze" :class="leiinfo.id?'xactive':''">{{ leiinfo.name?leiinfo.name:'请选择报考研究生类别' }}</text>
						<u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>考试天数：</text>
					<view class="shuru" @click="tianshow=true">
						<text class="xuanze" :class="tianinfo.id?'xactive':''">{{ tianinfo.days?tianinfo.days:'请选择考研初试天数' }}</text>
						<u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>考试考点：</text>
					<view class="shuru">
						<u-input  v-model="address" type="text" :border="false" placeholder='请输入考试考点' />
						<!-- <text class="xuanze">请选择考试考点</text> -->
						<!-- <u-icon class="xiala" name="arrow-down" color="#999999" size="28"></u-icon> -->
					</view>
				</view>
				<!-- <view class="tishi">
					<text>注：非应届毕业生请选择“往届生”</text>
				</view> -->
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>支付宝账号：</text>
					<view class="shuru">
						<u-input  v-model="account" type="text" :border="false" placeholder='请输入支付宝账号' :placeholder-style="placeholderStyle" />
					</view>
				</view>
				<view class="kitem">
					<text class="cname"><text class="xing">*</text>准考证图片：</text>
					<view class="tulist">
						<view class="tulitem">
							<image class="zhaoxiang" src="@/pages_subject/static/img/zhaoxiang.png" mode="" />
						</view>
						<view class="tulitem">
							<image class="hongcha" src="@/pages_subject/static/img/hongcha.png" mode="" />
							<image class="zhaoxiang" src="@/pages_subject/static/img/zhaoxiang.png" mode="" />
						</view>
					</view>
				</view>
				<view class="tishi">
					<text>注：准考证图片去除个人信息后再上传</text>
				</view>
			</view>

			<view class="ktwo" @click="gettijiao" v-if="type == 'add'">
				提交
			</view>
			
		</view>
		<!-- 考试天数弹窗 -->
		<view class="kaoview">
			<u-popup v-model="kaoshow" mode="center" :closeable="false" width="90%">
				<view class="kaoone">
					<image class="xuebg" src="@/pages_subject/static/img/xuebg.png" />
					<view class="kaoitems">
						<image class="guan" @click="kaoshow=false"  src="@/pages_subject/static/img/guan.png" />
						<text class="kaotian">考试天数？</text>
						<view class="tianview">
							<text class="tian">1. 管理类专业硕士，参加的统一考试叫管理类联考，笔试考一天 </text>
							<text class="tian">2. 考试超过3小时的考试科目会在第三天进行（例如设计学和建筑学</text>
							<text class="tian">3. 除了以上情况其他专业都是考两天</text>
							<view class="zhidao" @click="kaoshow=false">
								<image class="zhidaobtn" src="@/pages_subject/static/img/zhidao.png" />
							</view>
						</view>
						
					</view>

				</view>
			</u-popup>	
		</view>

		<!-- 支付弹窗 -->
		<zhipop :dishow="dishow" @shaiclose="dishow=false"></zhipop>
		<u-select v-model="nianshow" :list="nianlist" label-name="name" value-name="id" @confirm="confirmnian"></u-select>
		<!-- 城市选择 -->
		<u-select v-model="cityshow" :list="citylist" label-name="name" value-name="id" @confirm="confirmcity"></u-select>

		<!-- 报考点选择 -->
		<u-select v-model="baoshow" :list="baokaolist" label-name="name" value-name="id" @confirm="confirmbaokao"></u-select>
		<!-- 本科院校选择 -->
		<u-select v-model="benkeshow" :list="benkelist" label-name="name" value-name="id" @confirm="confirmbenke"></u-select>

		<!-- 类别选择 -->
		<u-select v-model="leishow" :list="leilist" label-name="name" value-name="id" @confirm="confirmlei"></u-select>

		<!-- 天数选择 -->
		<u-select v-model="tianshow" :list="tianlist" label-name="days" value-name="id" @confirm="confirmtian"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityshow:false,
				// citylist:[
				// 	{
				// 		value: '1',
				// 		label: '江'
				// 	},
				// 	{
				// 		value: '2',
				// 		label: '湖'
				// 	}
				// ],
				name:'',
				dishow:false,
				kaoshow:false,
				xuelist:[],//实时数据

				citylist:[],//城市列表
				cityinfo:{},
				tianlist:[],//获取天数
				leilist:[],//类别
				leishow:false,//类别选择
				leiinfo:{},
				tianshow:false,//天数选择
				tianinfo:{},
				isxuans:false,//选择
				zhulist:[],//注意事项
				zhuinfo:{},
				style: {
					img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				tianpop:'',
				to_school:'',//报考学校
				baokaolist:[],//报考点
				baoshow:false,
				baoinfo:{},

				benkelist:[],//本科院校
				benkeshow:false,//本科院校
				benkeinfo:{},//本科院校
				userinfo:{
					count:0
				},//用户信息

				bkschool:[],//报考学院
				bklist:[],//报考展示数据
				type:'add',
				placeholderStyle:"color: #c0c4cc;font-size: 24rpx;",

				nianlist:[],//年份选择
				nianshow:false,
				nianinfo:{},
				address:'',//考试考点
				account:'',//支付宝账号
				image:[],
				id:''
			}
		},
		onLoad(option) {
			this.type = option.type
			if(option.id){
				this.id = option.id
				this.gethuixian();
			}
			this.getShujutwo();//获取 城市 天数 类别

			this.kaotian();//获取考试天数
			this.getuserinfo();//用户信息
			this.getSchoolTo();//报考院校
		},
		onShow() {
		},
		methods: {
			async gethuixian(){
				let res = await this.$u.api.getUserDianListInfo({
					shop_id:uni.getStorageSync('shop_id'),
					id:this.id
				});
			},
			async getSchoolTo(){//报考院校
				let res = await this.$u.api.getSchoolTo({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.bkschool = res
			},
			async getuserinfo(){
				let res = await this.$u.api.userinfo({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.userinfo = res
				// console.log(res)
			},
			async getShujutwo(){
				let nian = await this.$u.api.getYear({
					shop_id:uni.getStorageSync('shop_id')
				});
				let shu = nian
				let shuzu = []
				for(let i in shu){
					let a ={}
					a.name = shu[i]
					a.id = shu[i]
					shuzu.push(a)
				}
				this.nianlist = shuzu

				let res = await this.$u.api.getCity({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.citylist = res
				let resd = await this.$u.api.getDays({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.tianlist = resd

				let resds = await this.$u.api.getCate({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.leilist = resds

			},
			async getzhuyi(){
				let res = await this.$u.api.getZhuyi({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.zhulist = res
				this.zhuinfo = res[0]
			},
			async getShuju(){
				let res = await this.$u.api.getShuju({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.xuelist = res
			},
			async kaotian(){
				let res = await this.$u.api.getConfig({
					shop_id:uni.getStorageSync('shop_id'),
					name:'ksts'
				});
				this.tianpop = res
			},
			
			async gettijiao(){
				let datas ={}
				datas.year = this.nianinfo.name
				datas.city = this.cityinfo.name
				datas.dian = this.baoinfo.name
				datas.school = this.to_school
				datas.cate = this.leiinfo.name
				datas.days = this.tianinfo.days
				datas.account = this.account
				datas.address = this.address
				datas.image = this.image
				datas.dian_info = this.baoinfo.name
				console.log(datas)
				let status = true
				for(let i in datas){
					if(!datas[i]){
						status = false
					}
				}
				if(!status){
					this.$u.toast("请先完善信息");
					return false;
				}
				console.log("0000")
				// return;
				// if(!this.cityinfo.name){
				// 	this.$u.toast("请选择考点所在城市");
				// 	return false;
				// }
				// if(!this.baoinfo.name){
				// 	this.$u.toast("请选择报考点");
				// 	return false;
				// }
				// if(!this.benkeinfo.name){
				// 	this.$u.toast("请选择本科院校");
				// 	return false;
				// }
				// if(!this.to_school){
				// 	this.$u.toast("请输入报考院校");
				// 	return false;
				// }
				// if(!this.leiinfo.name){
				// 	this.$u.toast("请选择类别");
				// 	return false;
				// }
				// if(!this.tianinfo.days){
				// 	this.$u.toast("请选择考试天数");
				// 	return false;
				// }

				let res = await this.$u.api.addUserDianList(datas);
				// addChaOrder
				this.$u.toast("提交成功");
				setTimeout(() => {
					uni.navigateBack()
				}, 1000);
				// this.navrouter("/pages_subject/twoPage/result?order_id="+res.order_id+'&city_id='+this.cityinfo.id+'&city_name='+this.cityinfo.name);
			},
			confirmcity(e){
				console.log(e)
				let list = this.citylist
				for(let i in list){
					if(list[i].id == e[0].value){
						this.cityinfo = list[i]
					}
				}
				this.getbaokao();//获取报考点
				this.getbenke();//获取本科院校
				// console.log(this.cityinfo)
			},
			async getbaokao(){
				let res = await this.$u.api.getDian({
					shop_id:uni.getStorageSync('shop_id'),
					city_id:this.cityinfo.id
				});
				this.baokaolist = res
			},
			async getbenke(){
				let res = await this.$u.api.getSchoolFrom({
					shop_id:uni.getStorageSync('shop_id'),
					city_id:this.cityinfo.id
				});
				this.benkelist = res
			},
			confirmbaokao(e){//报考点选择
				console.log(e)
				let list = this.baokaolist
				for(let i in list){
					if(list[i].id == e[0].value){
						this.baoinfo = list[i]
					}
				}
			},
			confirmbenke(e){
				let list = this.benkelist
				for(let i in list){
					if(list[i].id == e[0].value){
						this.benkeinfo = list[i]
					}
				}
			},
			confirmlei(e){
				let list = this.leilist
				for(let i in list){
					if(list[i].id == e[0].value){
						this.leiinfo = list[i]
					}
				}
			},
			confirmtian(e){
				let list = this.tianlist
				for(let i in list){
					if(list[i].id == e[0].value){
						this.tianinfo = list[i]
					}
				}
				console.log(this.tianinfo)
			},
			confirmnian(e){
				let list = this.nianlist
				for(let i in list){
					if(list[i].id == e[0].value){
						this.nianinfo = list[i]
					}
				}
				console.log(this.nianinfo)
			},
			input(e){
				console.log(e)
				let str1 = "Hello World";
				let str2 = "Hello";
				let bkschool = this.bkschool
				let shuzu = []
				for(let i in bkschool){
					// if(bkschool[i].name)
					if (bkschool[i].name.indexOf(e) !== -1) {
					// console.log("str1 包含 str2");
					shuzu.push(bkschool[i])
					} else {
					// console.log("str1 不包含 str2");
					}
				}
				console.log(shuzu)
				this.bklist = shuzu

				if(this.bklist !=''){
					this.isxuans = true
					console.log(this.isxuans)
				}else{
					this.isxuans = false
				}
				
			},
			xuanClick(item){
				this.to_school = item.name
				console.log(this.to_school)
				this.isxuans = false
			},
			blur(){
				if(this.to_school!=''){
					this.isxuans = false
				}
				
			},
			zhuClick(item){
				this.zhuinfo = item
			},
			getbaoselect(){
				if(!this.cityinfo.id){
					this.$u.toast("请先选择城市");
					return false;
				}
				this.baoshow = true
			},
			getbenselect(){
				if(!this.cityinfo.id){
					this.$u.toast("请先选择城市");
					return false;
				}
				this.benkeshow = true
			},
			shaiclose(){
				this.dishow = false
				this.getuserinfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 120rpx;
		.kone{
			padding: 30rpx 50rpx 30rpx 30rpx;
			display: flex;
			flex-direction: column;
			.kitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				margin-bottom: 20rpx;
				
				.cname{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #313131;
					display: inline-block;
					width: 220rpx;
					text-align: right;
					white-space: nowrap;
				}
				.tulist{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.tulitem{
						width: 140rpx;
						height: 110rpx;
						position: relative;
						margin: 0 20rpx 20rpx 0rpx;
						.zhaoxiang{
							position: absolute;
							width: 100%;
							height: 100%;
						}
						.hongcha{
							position: absolute;
							width: 36rpx;
							height: 36rpx;
							top: -10rpx;
							right: -10rpx;
							z-index: 1;
						}
					}
				}
				.xing{
					color: #FF6430;
				}
				.shuru{
					flex: 1;
					padding: 25rpx;
					// background: #FFFFFF;
					// box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(196,198,255,0.39);
					// border-radius: 10rpx;
					min-height: 70rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					background: rgba(74,143,255,0.1);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					max-width: 66%;
					.xuanze{
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						// font-weight: 400;
						color: #c0c4cc;
						// font-size: 26rpx;
						font-weight: 500;
					}
					.xactive{
						color: #333;
					}
					.xiala{
						margin-left: auto;
						width: 24rpx;
						height: 14rpx;
					}
					/deep/.u-input__input{
						min-height: 20px !important;
						font-size: 24rpx;
					}
				}
				.yiwen{
					width: 32rpx;
					height: 32rpx;
					// margin-left: 12rpx;
					position: absolute;
					right: 8rpx;
				}
			}
			.xuexia{
					width: 456rpx;
					height: 309rpx;
					background: #FFFFFF;
					border: 1px solid #EEEEEE;
					box-shadow: 0rpx 11rpx 18rpx 0rpx rgba(196,198,255,0.39);
					border-radius: 10rpx;
					position: absolute;
					bottom: -154px;
					right: 0;
					z-index: 10;
					//#ifdef  MP-WEIXIN
					bottom: -133px;
					//#endif
					.xiaview{
						height: 100%;
						overflow: hidden;
						white-space: nowrap;
						.beiview{
							padding: 15rpx 20rpx;
							.beiietm{
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 400;
								// color: #FF664E;
								color: #353535;
							}
						}
					}
				}
			.tishi{
				padding-left: 220rpx;
				margin-bottom: 20rpx;
				text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF6430;
				}
			}
		}
		.ktwo{
			position: relative;
			height: 90rpx;
			// width: 100%;
			margin: 0rpx 15rpx;
			background: #FFC729;
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #313131;
			.kaobtn{
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
		.kthree{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
			border-radius: 20rpx;
			padding: 35rpx 25rpx;
			margin:40rpx 30rpx;
			.kbiao{
				display: block;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #353535;
			}
			.leiji{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 35rpx 0 10rpx;
				.leiitem{
					width: 33.33%;
					padding: 0 15rpx;
					margin-bottom: 25rpx;
					.items{
						width: 100%;
						height: 58rpx;
						background: #EEEEEE;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #353535;
					}
				}
				.lactive{
					.items{
						background: #FF664E;
						color: #fff;
					}
				}
			}
			.gcont{
				display: flex;
				flex-direction: column;
				.gone{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 8rpx;
					.yuan{
						display: inline-block;
						width: 20rpx;
						border-radius: 50%;
						height: 20rpx;
						background: #FF664E;
						margin-right: 10rpx;
					}
					.nei{
						color: #32303E;
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}

			.cview{
				box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
				border-radius: 0rpx;
				margin-top: 30rpx;
			}
			.cheng{
				display: flex;
				flex-direction: row;
				align-items: center;
				
				
			}
			.chengone{
				height: 60rpx;
				background: #0082FB;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				border-right: 1rpx solid #fff;
				.chengone{
					padding: 15rpx;
					
				}
			}
			.flex-row{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
			.one{
				width: 20%;
			}
			.two{
				width: 40%;
			}
			.neicheng{
				.chenglist{
					padding: 15rpx 0;
					display: flex;
					flex-direction: row;
					align-items: center;
					.chengtwoname{
						display: inline-block;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #353535;
						text-align: center;
					}
					.chengtwodaxue{
						display: inline-block;
						font-size: 25rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #353535;
						text-align: center;
					}
				}
				.chenglist:nth-child(even){
					background-color: rgba(89, 97, 245, 0.09);
				}
			}
		}
		.kzhuyi{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin: 0rpx 0 30rpx;
			.zhutit{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FF6430;
			}
			.qumai{
				margin-left: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #0073FA;
			}
		}
	}
	.keview{
		position: fixed;
		width: 184rpx;
		height: 64rpx;
		background: #216CFE;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		right: 15rpx;
		bottom: 30rpx;
		padding: 0 4rpx;
		// #ifdef H5
		bottom: 130rpx;
		// #endif
		// position: relative;
		.kefuicon{
			width: 56rpx;
			height: 56rpx;
		}
		text{
			display: inline-block;
			margin-left: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.btn{
			position: absolute;
			background-color: transparent;
			width: 100%;
			height: 100%;
			z-index: 1;
			border: none;
		}
		/deep/ button::after  {
			border: none;
		}
	}

	// 考试弹窗
	.kaoview{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.kaoone{
			width: 553prx;
			height: 741rpx;
			position: relative;
			.xuebg{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.kaoitems{
				position: relative;
				width: 100%;
				height: 100%;
				.kaotian{
					font-size: 60rpx;
					font-family: ZhenyanGB;
					font-weight: 400;
					color: #FFFFFF;
					display: inline-block;
					margin: 107rpx 0 0 48rpx;

				}
				.guan{
					position: absolute;
					width: 44rpx;
					height: 44rpx;
					right: 0;
					top: 20rpx;
				}
				.tianview{
					margin-top: 65px;
					width: 100%;
					height: 400rpx;
					padding-top: 20rpx;
					.tian{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #353535;
						margin: 0 50rpx;
						display: inline-block;
						margin-top: 10rpx;
					}
					// background-color: #000;
				}
				.zhidao{
					width: 100%;
					height: 133rpx;
					position: relative;
					.zhidaobtn{
						position: absolute;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

</style>
